<template>
  <el-dialog
    class="troila-dialog"
    title="角色授权"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="600px"
  >
    <el-form
      class="troila-form"
      :label-width="formLabelWidth"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="用户名称">
        <div class="el-input">
          {{ `${ishasValue(form, 'userName')}`
          }}{{ form.loginName ? `（${ishasValue(form, 'loginName')}）` : '' }}
        </div>
      </el-form-item>
      <el-form-item label="选择角色" prop="roleId">
        <el-select
          v-model="form.roleId"
          multiple
          filterable
          placeholder="请选择角色"
          popper-class="troila-popper"
        >
          <el-option
            :label="item.roleName"
            :value="item.id"
            v-for="(item, i) in dictionary.roleList"
            :key="i"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="ajaxIng" @click="submitForm('form')"
        >确 定</el-button
      >
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'userRole',
  props: {
    value: {
      // row
      type: [Boolean, Object],
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: this.value ? true : false, //弹窗显示
      ajaxIng: false,
      form: {
        loginName: '',
        userName: '',
        roleId: [],
      },
      formLabelWidth: '120px', //标题文字宽度
      rules: {
        // 规则
        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
      },
      dictionary: {
        roleList: [],
      },
    }
  },
  watch: {
    value(v) {
      let show = v ? true : false
      this.dialogFormVisible !== show ? (this.dialogFormVisible = show) : null
      if (v) {
        this.$refs.form ? this.$refs.form.resetFields() : null
        if (typeof v === 'object') {
          for (let k in this.form) {
            // this.form[k] = v[k]
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = v[k] || v[k] === 0 ? v[k] : '')
              : (this.form[k] = v[k] || v[k] === 0 ? [v[k]] : [])
          }
        } else {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = '')
              : (this.form[k] = [])
          }
        }
        this.form.roleId = v.roles
          ? v.roles.map((v) => {
              return v.id
            })
          : null
        this.$nextTick(() => {
          this.$refs.form ? this.$refs.form.clearValidate() : null
        })
        this.filteIds()
      }
    },
    dialogFormVisible(v) {
      v ? null : this.$emit('input', v)
    },
  },
  created() {
    this.getDropList()
  },
  methods: {
    filteIds() {
      if (this.dictionary.roleList && this.dictionary.roleList.length > 0) {
        let list = this.dictionary.roleList.map((v) => v.id)
        // console.log(
        //   list,
        //   this.form.roleId,
        //   this.form.roleId.filter((v) => list.indexOf(v) > -1)
        // )
        this.form.roleId = this.form.roleId
          ? this.form.roleId.filter((v) => list.indexOf(v) > -1)
          : null
      }
    },
    getDropList() {
      this.API.roleManage.findList().then((res) => {
        if (res.code == '1') {
          this.dictionary.roleList = res.data
          this.filteIds()
        }
      })
    },
    submitForm(formName) {
      if (this.ajaxIng) {
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ajaxIng = true
          // this.form.roleId = this.form.roleId
          this.$emit('roleConfirm', this.form)
          //   alert('submit!')
          //   this.dialogFormVisible = false
          //   this.$alertFn.success(`操作成功 ！`)
          // this.$alertFn.error(`操作失败 ！`)
          //   this.ajaxIng = false
          //   this.$emit('change')
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>